<template>
  <el-config-provider :locale="zhCn">
    <div style="height: 100%; width: 100%">
      <Header />

      <div class="router">
        <router-view></router-view>
      </div>

      <!-- 请求loading动画  z-index 998  -->
      <RequestLoading v-show="requestLoadingVisible"></RequestLoading>
    </div>

    <!-- 全局消息提示弹窗 -->
    <MessageAlert
      v-model:visible="alertVisible"
      :param="alertParam"
      @close="closeAlert"
    ></MessageAlert>
  </el-config-provider>
</template>

<script setup lang="ts">
import { onBeforeMount, watch } from 'vue'
import { storeToRefs } from 'pinia'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useRouter, useRoute } from 'vue-router'
import { useProjectStore, useUserStore } from '@/features/store/store'
import {
  useMessageAlertStore,
  useRequestLoadingStore,
} from '@/features/store/componentStore'
import { setRequestLoadingStore } from '@/request/request'

import Header from '@/components/Header.vue'
import MessageAlert from '@/components/MessageAlert/MessageAlert.vue'
import RequestLoading from '@/components/Loading/RequestLoading.vue'

const router = useRouter()

const { loginStatus } = storeToRefs(useUserStore())

// MessageAlert 组件全局状态
const { alertVisible, alertParam } = storeToRefs(useMessageAlertStore())
const { closeAlert } = useMessageAlertStore()

// RequestLoading 组件全局状态
const { requestLoadingVisible } = storeToRefs(useRequestLoadingStore())
onBeforeMount(() => {
  setRequestLoadingStore(useRequestLoadingStore())
})

onBeforeMount(() => {
  if (!loginStatus.value) return
  useProjectStore().getProjects()
})

watch(
  () => loginStatus.value,
  () => {
    if (!loginStatus.value) return
    useProjectStore().getProjects()
    setTimeout(() => {
      router.push('/home')
      setTimeout(() => {
        console.log('路由跳转', useRoute().path)
        if (useRoute().path != '/home') router.push('/home')
      }, 1000)
    }, 1000)
  }
)
</script>

<style scoped lang="less">
.router {
  width: 100%;
  height: calc(100% - 32px);
  background-color: #ececec51;
  overflow: auto;
}
</style>
